<template>
  <div class="content-right-wrap">
    <div class="top-wrap">
      <Card>
        <div slot="title">
          <div>日历图</div>
        </div>
        <div class="chart-box">
          <e-calendar :chartData="eCalendarChartData" @q-click="handleClick" />
          <Spin fix v-show="rightTopChartLoading">加载中...</Spin>
        </div>
      </Card>
    </div>
    <div class="bottom-wrap">
      <Card :bordered="false">
        <div slot="title">
          详情
        </div>
        <div class="detail-box">
          <meter-detail
            :id="id()"
            :currentMeterId="currentMeterId"
            :content="meterDetail"
            :columnNames="meterDetailColumns"
          />
        </div>
      </Card>
    </div>
  </div>
</template>
<script>
import { nanoid } from 'nanoid'
import dayjs from 'dayjs'
import { merge, each, head } from 'lodash'
import { createNamespacedHelpers } from 'vuex'
import meterDetailColumns from './meterDetailColumns'
import { eCalendarOptions } from './chartOptions'
const { mapState, mapActions } = createNamespacedHelpers('leakMonitoring')

export default {
  name: 'LeakMonitoringContentRight',
  components: {
    ECalendar: () => import('@/commons/charts/ECalendar'),
    MeterDetail: () => import('@/commons/MeterDetail')
  },
  data() {
    return {
      saveBtnLoading: false,
      mainList: [],
      secList: []
    }
  },
  computed: {
    ...mapState(['currentMeterId', 'meterDetail', 'rightTopChartLoading', 'CalendarList']),
    id() {
      return nanoid
    },
    meterDetailColumns() {
      return meterDetailColumns
    },
    eCalendarChartData() {
      const _seriesList = []
      const _list = this.CalendarList
      const _listFirst = head(_list)
      each(_list, (item, index) => {
        const _time = head(item)
        _seriesList.push([_time, 1])
      })

      return merge({}, eCalendarOptions, {
        calendar: [
          {
            range: head(_listFirst) ? dayjs(head(_listFirst)).format('YYYY-MM') : dayjs().format('YYYY-MM')
          }
        ],
        series: [
          {
            data: _seriesList
          }
        ]
      })
    }
  },
  methods: {
    ...mapActions(['loadELine']),
    handleClick(data) {
      const { value } = data
      if (head(value)) {
        this.loadELine({
          tId: head(value)
        })
      }
    }
  }
}
</script>
<style lang="less" scoped>
@deep: ~'>>>';

.content-right-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .top-wrap {
    flex: 1;
    margin-bottom: 10px;
    overflow: hidden;

    @{deep}.ivu-card-body {
      overflow: hidden;
    }
    .chart-box {
      width: 100%;
      height: 100%;
    }
  }
  .detail-box {
    padding: 0 10px;
  }
}
</style>
